<template>
  <div>
    <n-bar></n-bar>
    <div class="cate">
      <!-- 侧边栏 -->
      <van-sidebar @change="changeBar" v-model="activeKey">
        <van-sidebar-item
          v-for="item in catelist"
          :key="item.id"
          :title="item.catename"
        />
      </van-sidebar>
      <!-- 右侧的宫格 -->
      <van-grid class="grid-info" :border="false" :gutter="2" :column-num="3">
        <van-grid-item @click='goList(item.id)' v-for="item in secundlist" :key="item.id">
          <van-image :src="item.img" />
          <p class="grid-title">{{ item.catename }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCates } from "../request/app";
export default {
  data() {
    return {
      activeKey: 0,
      catelist: [],
      secundlist: [],
    };
  },
  mounted() {
    getCates().then((res) => {
      if (res.code == 200) {
        this.catelist = res.list;
        console.log(this.catelist, "分类列表");
        this.secundlist = this.catelist[0].children;
      }
    });
  },
  methods: {
    changeBar(n) {
      this.secundlist = this.catelist[n].children;
    },
    goList(id){
        this.$router.push("/list?id="+id)
    }
  },
};
</script>
<style lang="less" scope>
.cate {
  width: 100%;
  display: flex;
  .grid-info {
    flex: 1;
  }
}
</style>

